<template>
    <div class="main">
        <Panel :title="'运行参数'">
            <div style="height:'100%', paddingTop: 10">
                <ul style="height:'100%'">
                    <li class="eventListHead">
                        <span>参数</span>
                        <span>单位</span>
                        <span>数值</span>
                    </li>

                    <li class="eventListContent" v-for="(item, index) in data" :key="index">
                        <span>{{ item.type || "-" }}</span>
                        <span style="padding-left: 10px">{{ item.desc || "-" }}</span>
                        <span>{{ format(item.level) }}</span>
                    </li>
                </ul>
            </div>
        </Panel>
    </div>
</template>

<script>
import Panel from "../../../../../component/Panel";
export default {
    name: "JingQingList",
    components: {
        Panel,
    },
    props: {
        data: {
            type: Array,
        },
    },
    methods: {
        format(val) {
            return val !== undefined ? Number(val).toFixed(2) : "";
        },
    },
};
</script>

<style lang="scss" scoped>
ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}
.main {
    height: auto;
    //overflow: hidden;
    background-color: rgba(0, 0, 0, 0.1);
    // border: 1px solid red;
}
.spanBar {
    position: relative;
    > span {
        position: absolute;
        display: block;
        color: rgba(255, 255, 255, 0.9);
    }
    > span:nth-child(1) {
        font-size: 12px;
        left: 0px;
        bottom: 12px;
    }
    > span:nth-child(2) {
        font-size: 22px;
        right: 0px;
        bottom: 6px;
        font-family: "font-num";
    }
    > span:nth-child(3),
    > span:nth-child(4) {
        bottom: 5px;
        left: 0;
        height: 4px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.9);
        content: "";
        border-radius: 2px;
    }
    > span:nth-child(4) {
        z-index: 9;
    }
}

.singleChartTotal {
    > div:nth-child(1) {
        width: 100%;
        height: 100%;
    }
}

.rangeListTop,
.rangeListBottom {
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    > span {
        position: absolute;
        display: inline-block;
    }
    > span:nth-child(1) {
        font-family: "font-num";
        font-size: 22px;
        transform: scale(1.35, 0.75);
        left: 5px;
    }
    > span:nth-child(2) {
        font-family: "font-num";
        left: 36px;
        top: 5px;
        transform: scale(1.5, 0.75);
    }
    > span:nth-child(3) {
        right: 40px;
        font-size: 12px;
        transform: scale(0.9);
        bottom: 0px;
    }
    > span:nth-child(4) {
        right: 0;
        font-family: "font-num";
        font-size: 18px;
    }
}

.rangeListTop {
    height: 33%;
    overflow: hidden;
    > span:nth-child(1) {
        font-size: 38px;
        left: 5px;
        top: -5px;
        color: #dee588;
    }
    > span:nth-child(2) {
        font-size: 18px;
        left: 52px;
        top: 10px;
    }
    > span:nth-child(4) {
        font-size: 28px;
    }
    > span:nth-child(3) {
        right: 70px;
        font-size: 14px;
        bottom: 0px;
        height: 20px;
        bottom: 5px;
    }
    > span:nth-child(5) {
        height: 2px;
        background-color: rgba(255, 255, 255, 0.2);
        top: 22px;
        left: 78px;
        width: calc(100% - 220px);
    }
}
.rangeListBottom {
    height: calc(100% / 7);
    > span:nth-child(5) {
        height: 2px;
        background-color: rgba(255, 255, 255, 0.2);
        top: 15px;
        left: 55px;
        width: calc(100% - 160px);
    }
}

.eventListHead {
    position: relative;
    height: calc((100% - 20px) / 8);
    color: rgba(255, 255, 255, 0.7);
    // margin-top: 10px;
    // border: 1px solid red;
    > span {
        height: 100%;
        display: inline-block;
        float: left;
        padding: 0 5px;
        font-size: 14px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 31px;
    }
    > span:nth-child(1) {
        width: 110px;
        margin-left: 10px;
    }
    > span:nth-child(2) {
        width: calc(100% - 200px);
    }
    > span:nth-child(3) {
        width: 80px;
    }
    // background-color: #fff;
    // color: #000;
    width: 358px;
    height: 31px;
    background: url("../../../../../../../../static/images/ui/11.png");
    line-height: 31px;
    margin-bottom: 4px;
}

.eventListContent {
    position: relative;
    // height: calc((100% - 20px) / 8);
    height: 30px;
    color: rgba(255, 255, 255, 0.9);
    // border: 1px solid red;
    > span {
        height: 30px;
        display: inline-block;
        float: left;
        // padding: 0 5px;
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        // margin-top: 20px;
    }
    > span:nth-child(1) {
        width: 110px;
        margin-left: 10px;
    }
    > span:nth-child(2) {
        width: calc(100% - 200px);
    }
    > span:nth-child(3) {
        width: 80px;
    }
}
</style>
